<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>桂图管理系统</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="all-box">
		<div class="overlay"></div>
		<div class="container-fluid bg-full"></div>
		<div class="container">
		    <div class="row bg-design">
		        <div class="theme col-md-8">
		            <div>
		                <i class="iconfont icon-diannao"></i>
		            </div>
		            <div>
		                <p>MANAGEMENT</p>
		                <p>桂图管理系统</p>
		            </div>
		        </div>
		        <div class="loginBox col-md-4 col-md-offset-8">
		            <div class="userLogin">
		                <i class="iconfont icon-dengluyonghu"></i>
		                <span><b>USER LOGIN</b></span>
		            </div>
		            <form id="loginForm">
		                <div class="input-wrapper">
		                    <label>用户名:</label>
		                    <input type="text" id="username" name="username" placeholder="请输入用户名" v-model="login.username">
		                    <div class="error-ident">
		                        <div class="ident-msg"></div>
		                        <div class="triangle"></div>
		                    </div>
		                </div>
		                <div class="input-wrapper">
		                    <label>密码:</label>
		                    <input type="password" id="password" name="password" placeholder="请输入密码" v-model="login.password">
		                    <div class="error-pass">
		                        <div class="pass-msg"></div>
		                        <div class="triangle"></div>
		                    </div>
		                </div>
		                <div style="text-align: center;">
		                    <a href="" data-toggle="modal" data-target="#addCardsModal">
		                        还没有账户？点击这里注册！
		                    </a>
		                </div>
		                <input type="button" value="登录" @click="validateAndLogin">
		                <input type="reset" value="重置" onclick="cleandateForm()">
		            </form>
		        </div>
		    </div>
		</div>
		<div class="confirmation showOk">
		    <img src="img/login/gato.jpg">
		</div>
		
		<!-- 注册模态框 -->
		<form method="post" action="post" class="form-horizontal" role="form" id="form_data" style="margin: 20px;">
		    <div class="modal fade" id="addCardsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		        aria-hidden="true">
		        <div class="modal-dialog">
		            <div class="modal-content">
		                <div class="modal-header">
		                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                        &times;
		                    </button>
		                    <h4 class="modal-title" id="myModalLabel">
		                        用户注册
		                    </h4>
		                </div>
		                <div class="modal-body">
		                    <form class="form-horizontal" role="form">
		                        <div class="form-group">
		                            <label for="title" class="col-sm-3 control-label">用户名：</label>
		                            <div class="col-sm-8">
		                                <input type="text" class="form-control" name="name" id="name"
		                                    placeholder="请输入用户名" v-model="register.username">
		                                <div class="error-user">
		                                    <div class="name-msg"></div>
		                                    <div class="triangle"></div>
		                                </div>
		                            </div>
		                        </div>
		
		                        <div class="form-group">
		                            <label for="password" class="col-sm-3 control-label">密码：</label>
		                            <div class="col-sm-8">
		                                <input type="password" class="form-control" name="password" id="pwd"
		                                    placeholder="请输入密码" v-model="register.password">
		                                <div class="error-psw">
		                                    <div class="pass-msg"></div>
		                                    <div class="triangle"></div>
		                                </div>
		                            </div>
		                        </div>
		
		                        <div class="form-group">
		                            <label for="rePassword" class="col-sm-3 control-label">确认密码：</label>
		                            <div class="col-sm-8">
		                                <input type="password" class="form-control" name="rePassword" id="rePwd"
		                                    placeholder="请再次确认密码" v-model="register.rePassword">
		                                <div class="error-rePsw">
		                                    <div class="pass-msg"></div>
		                                    <div class="triangle"></div>
		                                </div>
		                            </div>
		                        </div>
		
		                    </form>
		                </div>
		                <div class="modal-footer">
		                    <button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭
		                    </button>
		                    <button type="button" class="btn btn-primary" @click="validateRegister">
		                        提交
		                    </button><span id=" tip"> </span>
		                </div>
		            </div><!-- /.modal-content -->
		        </div><!-- /.modal -->
		    </div>
		</form>
	</div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
	<script src="js/vue.js"></script>
    <script src="js/script.js"></script>
	<script src="js/login_req.js"></script>
</body>

</html>